import React from 'react';
import {Table, Row, Col, Form, Input, Icon, InputNumber, Radio, DatePicker, Select, Upload, Button, Switch, Modal, Popconfirm, Tabs, message} from 'antd';
import moment from 'moment'
import OperatorConstant from "../../utils/OperatorConstant";

const R = require('ramda');
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const dateFormat = 'YYYY-MM-DD';
const view= "view"

export default Form.create({wrappedComponentRef: true})(class AddInvoice extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            disabled: true,
            type: ""
        }
    }

    tempId = 1;

    handleCancel = () => {
        this.handleResetFields();
    }

    handleResetFields = () => {
        this.props.form.resetFields();
    }

    onChangeAmt = (record, type, e) => {
        this.props.dispatch({
            type: 'recinvoices/updateInvoices',
            payload: {
                record,
                value: e.target ? e.target.value : e,
                type //type=1,意味着修改发票号码，type=2意味着修改金额
            }
        })

    }

    addInvoice = () => {
        this.props.form.validateFields((errors, values) => {
            if (errors) return;
            let dataSource = R.isNil(this.props.dataSource) || R.isEmpty(this.props.dataSource) ? {} : this.props.dataSource[0];
            let drawerName = null;
            R.map((item)=>{
                if(item.id+"" === values.drawername) drawerName = item.name;
            }, R.isNil(this.props.drawerList) ? [] : this.props.drawerList);
            this.props.dispatch({
                type: 'recinvoices/addInvoices',
                payload: {
                    orderid: dataSource.orderId,
                    orderId: dataSource.orderId,
                    drawername: drawerName,
                    receiptno: values.receiptno,
                    num: values.num,
                    tempId: this.tempId,
                    createtime: moment().format(dateFormat),
                    onSuccess: () => {
                        this.tempId = this.tempId + values.num;
                    }
                }
            })
        })

    }


    deleteInvoice= (record) =>{
        this.props.dispatch({
            type: 'recinvoices/deleteInvoices',
            payload: {
                receiptno : record.receiptno,
            }
        })
    }


    columns = [{
        title: '发票号码',
        key: 'receiptno',
        render: (text, record, index) => {
            return (
                this.props.type  === OperatorConstant.view ? record.receiptno : 
                <Input disabled={this.props.disabled} maxLength="20" value={record.receiptno} onChange={this.onChangeAmt.bind(this, record, "1")}/>
            )
        }
    }, {
        title: '开票人名称',
        dataIndex: 'drawername',
        key: 'drawername',
    },{
        title: '金额(人民币)',
        key: 'amt',
        render: (text, record, index) => {
            return (
                this.props.type  === OperatorConstant.view ? record.amt : 
                <InputNumber disabled={this.props.disabled} min={0} max={99999999999999} value={record.amt} onChange={this.onChangeAmt.bind(this, record, "2")}/>
            )
        }
    }, {
        title: '录入时间',
        dataIndex: 'createtime',
        key: 'createtime',
    }, {
        title: '操作',
        key: 'key_oprator',
        render: (text, record, index) => {
            let dataSource = R.isNil(this.props.dataSource) || R.isEmpty(this.props.dataSource) ? {} : this.props.dataSource[0];
            if(dataSource.openinvoicestatus == 2 && this.props.type  !== OperatorConstant.view){
                return (

                    <span>
                    <a href="#" onClick={this.deleteInvoice.bind(this, record)}>删除</a>
                </span>
                );
            }
        }
    }];


    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {labelCol: { xs: {span: 8}, sm: {span: 8}}, wrapperCol: {xs: {span: 15}, sm: {span: 14}}};
        let dataSource = R.isNil(this.props.dataSource) || R.isNil(this.props.dataSource[0]) ? [] : this.props.dataSource[0].taxInvoices;

        return (


            <div>
                {this.props.type  != OperatorConstant.view ?
                    <Form>
                        <Row>
                            <Col span={10}>
                                <FormItem
                                    {...formItemLayout} label="发票号" hasFeedback>
                                    {getFieldDecorator('receiptno', {
                                        rules: [{
                                            required: true, message: '请输入发票号',
                                        }],
                                    })(
                                        <InputNumber style={{width: 230}} max={99999999999999999999}/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={10}>
                                <FormItem
                                    {...formItemLayout} label="份数" hasFeedback>
                                    {getFieldDecorator('num', {
                                        rules: [{
                                            required: true, message: '请输入份数',
                                        }],
                                    })(
                                        <InputNumber style={{width: 230}} min={1} max={20}/>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={10}>
                                <FormItem
                                    {...formItemLayout} label="开票人名称" hasFeedback>
                                    {getFieldDecorator('drawername', {
                                        rules: [{
                                            required: true, message: '请选择开票人',
                                        }],
                                    })(
                                        <Select disabled={this.props.disabled} style={{width: '100%'}}>
                                            {
                                                !R.isNil(this.props.drawerList) ? this.props.drawerList.map(item => {
                                                    return (<Select.Option value={item.id+""} key={item.id+""}>{item.name}</Select.Option>);
                                                }) : ''
                                            }
                                        </Select>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={10} >
                                <Button type="primary" icon="search" style={{marginLeft: 110}} onClick={this.addInvoice.bind(this)}>新增</Button>
                            </Col>
                        </Row>
                    </Form>
                    : ""}

                <Tabs>
                    <TabPane tab="发票明细" key="2">
                        <Row>
                            <Col>
                                <div>
                                    <Table rowKey={record => record.id} dataSource={dataSource} columns={this.columns} bordered={true} size={'middle'}/>
                                </div>
                            </Col>
                        </Row>
                    </TabPane>
                </Tabs>
            </div>

        );
    }
})


